<template>
  <div class="iot-devices-management">
    <div class="page-header">
      <h2>智能设备管理</h2>
      <Space>
        <Button @click="refreshDevices">
          <IconifyIcon icon="ant-design:reload-outlined" />
          刷新状态
        </Button>
        <Button type="primary" @click="showAddDeviceModal = true">
          <IconifyIcon icon="ant-design:plus-outlined" />
          添加设备
        </Button>
      </Space>
    </div>

    <!-- 设备概览统计 -->
    <Row :gutter="16" class="statistics-row">
      <Col :span="6">
        <StatisticsCard
          title="设备总数"
          :value="statistics.totalDevices"
          :change="statistics.totalChange"
          icon="ant-design:database-outlined"
          color="#1890ff"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="在线设备"
          :value="statistics.onlineDevices"
          :change="statistics.onlineChange"
          icon="ant-design:check-circle-outlined"
          color="#52c41a"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="异常设备"
          :value="statistics.offlineDevices"
          :change="statistics.offlineChange"
          icon="ant-design:warning-outlined"
          color="#faad14"
        />
      </Col>
      <Col :span="6">
        <StatisticsCard
          title="故障设备"
          :value="statistics.faultDevices"
          :change="statistics.faultChange"
          icon="ant-design:close-circle-outlined"
          color="#f5222d"
        />
      </Col>
    </Row>

    <!-- 设备分类卡片 -->
    <Row :gutter="16" class="device-categories">
      <Col :span="4">
        <Card class="category-card" @click="navigateToCategory('locks')">
          <div class="category-content">
            <IconifyIcon
              icon="ant-design:lock-outlined"
              class="category-icon"
            />
            <div class="category-info">
              <div class="category-name">门锁管理</div>
              <div class="category-count">{{ deviceCounts.locks }}台</div>
              <div class="category-status">
                <Tag :color="getStatusColor(deviceStatus.locks)">
                  {{ getStatusText(deviceStatus.locks) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="4">
        <Card class="category-card" @click="navigateToCategory('meters')">
          <div class="category-content">
            <IconifyIcon
              icon="ant-design:thunderbolt-outlined"
              class="category-icon"
            />
            <div class="category-info">
              <div class="category-name">水电表监控</div>
              <div class="category-count">{{ deviceCounts.meters }}台</div>
              <div class="category-status">
                <Tag :color="getStatusColor(deviceStatus.meters)">
                  {{ getStatusText(deviceStatus.meters) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="4">
        <Card class="category-card" @click="navigateToCategory('security')">
          <div class="category-content">
            <IconifyIcon
              icon="ant-design:safety-outlined"
              class="category-icon"
            />
            <div class="category-info">
              <div class="category-name">安防设备</div>
              <div class="category-count">{{ deviceCounts.security }}台</div>
              <div class="category-status">
                <Tag :color="getStatusColor(deviceStatus.security)">
                  {{ getStatusText(deviceStatus.security) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="4">
        <Card class="category-card" @click="navigateToCategory('environment')">
          <div class="category-content">
            <IconifyIcon
              icon="ant-design:cloud-outlined"
              class="category-icon"
            />
            <div class="category-info">
              <div class="category-name">环境监控</div>
              <div class="category-count">{{ deviceCounts.environment }}台</div>
              <div class="category-status">
                <Tag :color="getStatusColor(deviceStatus.environment)">
                  {{ getStatusText(deviceStatus.environment) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="4">
        <Card class="category-card" @click="navigateToCategory('sensors')">
          <div class="category-content">
            <IconifyIcon
              icon="ant-design:radar-chart-outlined"
              class="category-icon"
            />
            <div class="category-info">
              <div class="category-name">传感器</div>
              <div class="category-count">{{ deviceCounts.sensors }}台</div>
              <div class="category-status">
                <Tag :color="getStatusColor(deviceStatus.sensors)">
                  {{ getStatusText(deviceStatus.sensors) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="4">
        <Card class="category-card" @click="navigateToCategory('controllers')">
          <div class="category-content">
            <IconifyIcon
              icon="ant-design:control-outlined"
              class="category-icon"
            />
            <div class="category-info">
              <div class="category-name">控制器</div>
              <div class="category-count">{{ deviceCounts.controllers }}台</div>
              <div class="category-status">
                <Tag :color="getStatusColor(deviceStatus.controllers)">
                  {{ getStatusText(deviceStatus.controllers) }}
                </Tag>
              </div>
            </div>
          </div>
        </Card>
      </Col>
    </Row>

    <!-- 实时监控面板 -->
    <Row :gutter="16" class="monitoring-panel">
      <Col :span="16">
        <Card title="设备状态实时监控" class="monitoring-card">
          <div class="monitoring-content">
            <div class="monitoring-header">
              <Space>
                <Button
                  v-for="period in monitoringPeriods"
                  :key="period.value"
                  :type="
                    selectedPeriod === period.value ? 'primary' : 'default'
                  "
                  size="small"
                  @click="selectedPeriod = period.value"
                >
                  {{ period.label }}
                </Button>
              </Space>
              <Button type="link" @click="refreshMonitoring">
                <IconifyIcon icon="ant-design:reload-outlined" />
                刷新
              </Button>
            </div>
            <div class="monitoring-chart">
              <div class="chart-placeholder">
                <IconifyIcon
                  icon="ant-design:line-chart-outlined"
                  class="chart-icon"
                />
                <p>设备状态监控图表</p>
                <p class="chart-desc">
                  显示设备在线率、响应时间、故障率等实时数据
                </p>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col :span="8">
        <Card title="告警信息" class="alerts-card">
          <div class="alerts-list">
            <div
              v-for="alert in recentAlerts"
              :key="alert.id"
              class="alert-item"
              :class="alert.level"
            >
              <div class="alert-icon">
                <IconifyIcon :icon="getAlertIcon(alert.level)" />
              </div>
              <div class="alert-content">
                <div class="alert-title">{{ alert.title }}</div>
                <div class="alert-desc">{{ alert.description }}</div>
                <div class="alert-time">{{ alert.time }}</div>
              </div>
            </div>
          </div>
          <div class="alerts-footer">
            <Button type="link" @click="viewAllAlerts">查看全部告警</Button>
          </div>
        </Card>
      </Col>
    </Row>

    <!-- 设备列表 -->
    <Card title="设备列表" class="device-list-card">
      <div class="list-header">
        <Form layout="inline" :model="searchForm" class="search-form">
          <FormItem label="设备名称">
            <Input
              v-model:value="searchForm.name"
              placeholder="请输入设备名称"
              allow-clear
            />
          </FormItem>
          <FormItem label="设备类型">
            <Select
              v-model:value="searchForm.type"
              placeholder="请选择类型"
              allow-clear
              style="width: 120px"
            >
              <SelectOption value="lock">门锁</SelectOption>
              <SelectOption value="meter">水电表</SelectOption>
              <SelectOption value="camera">摄像头</SelectOption>
              <SelectOption value="sensor">传感器</SelectOption>
              <SelectOption value="controller">控制器</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="设备状态">
            <Select
              v-model:value="searchForm.status"
              placeholder="请选择状态"
              allow-clear
              style="width: 120px"
            >
              <SelectOption value="online">在线</SelectOption>
              <SelectOption value="offline">离线</SelectOption>
              <SelectOption value="fault">故障</SelectOption>
              <SelectOption value="maintenance">维护中</SelectOption>
            </Select>
          </FormItem>
          <FormItem label="安装位置">
            <Input
              v-model:value="searchForm.location"
              placeholder="请输入安装位置"
              allow-clear
            />
          </FormItem>
          <FormItem>
            <Space>
              <Button type="primary" @click="handleSearch">
                <IconifyIcon icon="ant-design:search-outlined" />
                搜索
              </Button>
              <Button @click="handleReset">
                <IconifyIcon icon="ant-design:reload-outlined" />
                重置
              </Button>
            </Space>
          </FormItem>
        </Form>
      </div>
      <Table
        :columns="columns"
        :data-source="filteredDevices"
        :pagination="pagination"
        :loading="loading"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <div class="device-info">
              <div class="device-name">{{ record.name }}</div>
              <div class="device-id">ID: {{ record.deviceId }}</div>
            </div>
          </template>
          <template v-else-if="column.key === 'type'">
            <Tag :color="getTypeColor(record.type)">
              {{ getTypeText(record.type) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'status'">
            <Tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </Tag>
          </template>
          <template v-else-if="column.key === 'location'">
            <div class="location-info">
              <IconifyIcon icon="ant-design:environment-outlined" />
              <span>{{ record.location }}</span>
            </div>
          </template>
          <template v-else-if="column.key === 'lastUpdate'">
            <div class="update-info">
              <span class="update-time">{{ record.lastUpdate }}</span>
              <span class="update-status" :class="record.status">
                {{ getUpdateStatusText(record.status) }}
              </span>
            </div>
          </template>
          <template v-else-if="column.key === 'action'">
            <Space>
              <Button type="link" size="small" @click="viewDevice(record)">
                查看
              </Button>
              <Button type="link" size="small" @click="controlDevice(record)">
                控制
              </Button>
              <Button type="link" size="small" @click="editDevice(record)">
                编辑
              </Button>
              <Button type="link" size="small" @click="restartDevice(record)">
                重启
              </Button>
            </Space>
          </template>
        </template>
      </Table>
    </Card>

    <!-- 添加设备弹窗 -->
    <Modal
      v-model:open="showAddDeviceModal"
      title="添加设备"
      width="700px"
      @ok="handleSaveDevice"
      @cancel="handleCancelDevice"
    >
      <Form
        ref="deviceFormRef"
        :model="deviceForm"
        :rules="deviceRules"
        layout="vertical"
      >
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="设备名称" name="name">
              <Input
                v-model:value="deviceForm.name"
                placeholder="请输入设备名称"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="设备类型" name="type">
              <Select
                v-model:value="deviceForm.type"
                placeholder="请选择设备类型"
              >
                <SelectOption value="lock">门锁</SelectOption>
                <SelectOption value="meter">水电表</SelectOption>
                <SelectOption value="camera">摄像头</SelectOption>
                <SelectOption value="sensor">传感器</SelectOption>
                <SelectOption value="controller">控制器</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="设备型号" name="model">
              <Input
                v-model:value="deviceForm.model"
                placeholder="请输入设备型号"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="设备厂商" name="manufacturer">
              <Input
                v-model:value="deviceForm.manufacturer"
                placeholder="请输入设备厂商"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="安装位置" name="location">
              <Input
                v-model:value="deviceForm.location"
                placeholder="请输入安装位置"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="IP地址" name="ipAddress">
              <Input
                v-model:value="deviceForm.ipAddress"
                placeholder="请输入IP地址"
              />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="端口号" name="port">
              <Input
                v-model:value="deviceForm.port"
                placeholder="请输入端口号"
              />
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="设备状态" name="status">
              <Select
                v-model:value="deviceForm.status"
                placeholder="请选择设备状态"
              >
                <SelectOption value="online">在线</SelectOption>
                <SelectOption value="offline">离线</SelectOption>
                <SelectOption value="maintenance">维护中</SelectOption>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="设备描述" name="description">
          <Textarea
            v-model:value="deviceForm.description"
            placeholder="请输入设备描述"
            :rows="3"
          />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { IconifyIcon } from '@vben/icons';
import StatisticsCard from '#/components/hotel/StatisticsCard.vue';
import DeviceDashboard from './components/DeviceDashboard.vue';
import {
  Button,
  Card,
  Col,
  Form,
  FormItem,
  Input,
  message,
  Modal,
  Row,
  Select,
  SelectOption,
  Space,
  Table,
  Tag,
  Textarea,
} from 'ant-design-vue';

const router = useRouter();

// 状态管理
const loading = ref(false);
const showAddDeviceModal = ref(false);
const isEdit = ref(false);
const selectedPeriod = ref('1h');

// 表单引用
const deviceFormRef = ref();

// 统计数据
const statistics = reactive({
  totalDevices: 156,
  totalChange: 8,
  onlineDevices: 142,
  onlineChange: 5,
  offlineDevices: 8,
  offlineChange: -2,
  faultDevices: 6,
  faultChange: 1,
});

// 设备分类统计
const deviceCounts = reactive({
  locks: 45,
  meters: 32,
  security: 28,
  environment: 18,
  sensors: 25,
  controllers: 8,
});

const deviceStatus = reactive({
  locks: 'normal',
  meters: 'warning',
  security: 'normal',
  environment: 'normal',
  sensors: 'normal',
  controllers: 'normal',
});

// 搜索表单
const searchForm = reactive({
  name: '',
  type: '',
  status: '',
  location: '',
});

// 设备表单
const deviceForm = reactive({
  name: '',
  type: '',
  model: '',
  manufacturer: '',
  location: '',
  ipAddress: '',
  port: '',
  status: 'online',
  description: '',
});

// 表单验证规则
const deviceRules = {
  name: [{ required: true, message: '请输入设备名称' }],
  type: [{ required: true, message: '请选择设备类型' }],
  location: [{ required: true, message: '请输入安装位置' }],
  ipAddress: [{ required: true, message: '请输入IP地址' }],
};

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

// 监控时间段
const monitoringPeriods = [
  { label: '1小时', value: '1h' },
  { label: '6小时', value: '6h' },
  { label: '24小时', value: '24h' },
  { label: '7天', value: '7d' },
];

// 最近告警
const recentAlerts = ref([
  {
    id: 1,
    level: 'critical',
    title: '门锁离线',
    description: '101房间门锁设备离线，请检查网络连接',
    time: '2分钟前',
  },
  {
    id: 2,
    level: 'warning',
    title: '水电表异常',
    description: '205房间水表读数异常，可能存在漏水',
    time: '5分钟前',
  },
  {
    id: 3,
    level: 'info',
    title: '设备重启',
    description: '摄像头设备自动重启完成',
    time: '10分钟前',
  },
]);

// 设备数据
const devices = ref([
  {
    id: 1,
    name: '智能门锁-101',
    deviceId: 'LOCK001',
    type: 'lock',
    status: 'online',
    location: '1号楼101房间',
    lastUpdate: '2024-01-19 15:30',
    model: 'SL-2000',
    manufacturer: '海康威视',
    ipAddress: '192.168.1.101',
    port: '8080',
  },
  {
    id: 2,
    name: '水表-101',
    deviceId: 'WATER001',
    type: 'meter',
    status: 'warning',
    location: '1号楼101房间',
    lastUpdate: '2024-01-19 15:25',
    model: 'WM-100',
    manufacturer: '威胜',
    ipAddress: '192.168.1.102',
    port: '8080',
  },
  {
    id: 3,
    name: '电表-101',
    deviceId: 'ELECTRIC001',
    type: 'meter',
    status: 'online',
    location: '1号楼101房间',
    lastUpdate: '2024-01-19 15:30',
    model: 'EM-200',
    manufacturer: '威胜',
    ipAddress: '192.168.1.103',
    port: '8080',
  },
  {
    id: 4,
    name: '摄像头-大厅',
    deviceId: 'CAM001',
    type: 'camera',
    status: 'online',
    location: '1号楼大厅',
    lastUpdate: '2024-01-19 15:30',
    model: 'IPC-2000',
    manufacturer: '海康威视',
    ipAddress: '192.168.1.104',
    port: '8080',
  },
  {
    id: 5,
    name: '温湿度传感器-101',
    deviceId: 'SENSOR001',
    type: 'sensor',
    status: 'online',
    location: '1号楼101房间',
    lastUpdate: '2024-01-19 15:30',
    model: 'TH-100',
    manufacturer: '霍尼韦尔',
    ipAddress: '192.168.1.105',
    port: '8080',
  },
]);

// 表格列定义
const columns = [
  {
    title: '设备名称',
    dataIndex: 'name',
    key: 'name',
    width: 200,
  },
  {
    title: '设备类型',
    dataIndex: 'type',
    key: 'type',
    width: 100,
  },
  {
    title: '设备状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
  },
  {
    title: '安装位置',
    dataIndex: 'location',
    key: 'location',
    width: 150,
  },
  {
    title: '最后更新',
    dataIndex: 'lastUpdate',
    key: 'lastUpdate',
    width: 150,
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    fixed: 'right',
  },
];

// 过滤后的设备数据
const filteredDevices = computed(() => {
  let result = devices.value;

  if (searchForm.name) {
    result = result.filter((item) =>
      item.name.toLowerCase().includes(searchForm.name.toLowerCase()),
    );
  }

  if (searchForm.type) {
    result = result.filter((item) => item.type === searchForm.type);
  }

  if (searchForm.status) {
    result = result.filter((item) => item.status === searchForm.status);
  }

  if (searchForm.location) {
    result = result.filter((item) =>
      item.location.toLowerCase().includes(searchForm.location.toLowerCase()),
    );
  }

  return result;
});

// 类型相关函数
const getTypeColor = (type: string) => {
  const colors: Record<string, string> = {
    lock: 'blue',
    meter: 'green',
    camera: 'purple',
    sensor: 'orange',
    controller: 'cyan',
  };
  return colors[type] || 'default';
};

const getTypeText = (type: string) => {
  const texts: Record<string, string> = {
    lock: '门锁',
    meter: '水电表',
    camera: '摄像头',
    sensor: '传感器',
    controller: '控制器',
  };
  return texts[type] || type;
};

// 状态相关函数
const getStatusColor = (status: string) => {
  const colors: Record<string, string> = {
    online: 'green',
    offline: 'red',
    warning: 'orange',
    fault: 'red',
    maintenance: 'blue',
    normal: 'green',
  };
  return colors[status] || 'default';
};

const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    online: '在线',
    offline: '离线',
    warning: '异常',
    fault: '故障',
    maintenance: '维护中',
    normal: '正常',
  };
  return texts[status] || status;
};

const getUpdateStatusText = (status: string) => {
  const texts: Record<string, string> = {
    online: '正常',
    offline: '离线',
    warning: '异常',
    fault: '故障',
  };
  return texts[status] || status;
};

// 告警相关函数
const getAlertIcon = (level: string) => {
  const icons: Record<string, string> = {
    critical: 'ant-design:close-circle-outlined',
    warning: 'ant-design:warning-outlined',
    info: 'ant-design:info-circle-outlined',
  };
  return icons[level] || 'ant-design:info-circle-outlined';
};

// 事件处理函数
const refreshDevices = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    message.success('设备状态刷新完成');
  }, 1000);
};

const navigateToCategory = (category: string) => {
  router.push(`/hotel/iot-devices/${category}`);
};

const refreshMonitoring = () => {
  message.success('监控数据刷新完成');
};

const viewAllAlerts = () => {
  message.info('查看全部告警');
};

const handleSearch = () => {
  pagination.current = 1;
  message.success('搜索完成');
};

const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    type: '',
    status: '',
    location: '',
  });
  pagination.current = 1;
  message.success('重置完成');
};

const handleSaveDevice = async () => {
  try {
    await deviceFormRef.value.validate();
    if (isEdit.value) {
      message.success('设备信息更新成功');
    } else {
      message.success('设备添加成功');
    }
    showAddDeviceModal.value = false;
    resetDeviceForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancelDevice = () => {
  showAddDeviceModal.value = false;
  resetDeviceForm();
};

const viewDevice = (record: any) => {
  router.push(`/hotel/iot-devices/detail/${record.id}`);
};

const controlDevice = (record: any) => {
  message.info(`控制设备: ${record.name}`);
};

const editDevice = (record: any) => {
  isEdit.value = true;
  Object.assign(deviceForm, record);
  showAddDeviceModal.value = true;
};

const restartDevice = (record: any) => {
  message.success(`设备"${record.name}"重启成功`);
};

const resetDeviceForm = () => {
  Object.assign(deviceForm, {
    name: '',
    type: '',
    model: '',
    manufacturer: '',
    location: '',
    ipAddress: '',
    port: '',
    status: 'online',
    description: '',
  });
  isEdit.value = false;
};

onMounted(() => {
  // 初始化数据
  pagination.total = devices.value.length;
});
</script>

<style scoped>
.iot-devices-management {
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.statistics-row {
  margin-bottom: 24px;
}

.device-categories {
  margin-bottom: 24px;
}

.category-card {
  cursor: pointer;
  transition: all 0.3s;
}

.category-card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  transform: translateY(-2px);
}

.category-content {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
}

.category-icon {
  font-size: 32px;
  color: #1890ff;
}

.category-info {
  flex: 1;
}

.category-name {
  margin-bottom: 4px;
  font-weight: 500;
}

.category-count {
  margin-bottom: 4px;
  font-size: 12px;
  color: #666;
}

.monitoring-panel {
  margin-bottom: 24px;
}

.monitoring-card {
  height: 400px;
}

.monitoring-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.monitoring-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.monitoring-chart {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  color: #999;
  text-align: center;
}

.chart-icon {
  margin-bottom: 16px;
  font-size: 48px;
}

.chart-desc {
  margin-top: 8px;
  font-size: 14px;
}

.alerts-card {
  height: 400px;
}

.alerts-list {
  max-height: 300px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
}

.alert-item.critical {
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
}

.alert-item.warning {
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
}

.alert-item.info {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
}

.alert-icon {
  margin-top: 2px;
  font-size: 16px;
}

.alert-item.critical .alert-icon {
  color: #f5222d;
}

.alert-item.warning .alert-icon {
  color: #faad14;
}

.alert-item.info .alert-icon {
  color: #52c41a;
}

.alert-content {
  flex: 1;
}

.alert-title {
  margin-bottom: 4px;
  font-weight: 500;
}

.alert-desc {
  margin-bottom: 4px;
  font-size: 12px;
  color: #666;
}

.alert-time {
  font-size: 12px;
  color: #999;
}

.alerts-footer {
  margin-top: 16px;
  text-align: center;
}

.device-list-card {
  margin-bottom: 16px;
}

.list-header {
  margin-bottom: 16px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.device-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.device-name {
  font-weight: 500;
  color: #1890ff;
  cursor: pointer;
}

.device-name:hover {
  text-decoration: underline;
}

.device-id {
  font-size: 12px;
  color: #999;
}

.location-info {
  display: flex;
  gap: 4px;
  align-items: center;
}

.update-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.update-time {
  font-size: 12px;
  color: #666;
}

.update-status {
  font-size: 12px;
  font-weight: 500;
}

.update-status.online {
  color: #52c41a;
}

.update-status.offline {
  color: #f5222d;
}

.update-status.warning {
  color: #faad14;
}

.update-status.fault {
  color: #f5222d;
}

:deep(.ant-card-body) {
  padding: 12px;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 500;
  background-color: #fafafa;
}
</style>
